<template>
  <div class="container">
    <div class="com-echarts" ref="map_ref" @dblclick="reverMap"></div>
  </div>
</template>

<script>
import "../../public/static/theme/chalk";
import china from "../../public/static/map/china.json";
import { getProvinceMapInfo } from "../utils/map_utils";
import axios from "axios";
export default {
  data() {
    return {
      echartsInit: null,
      allDate: [],
      mapData: [], //获取地图的尺量数据缓存
    };
  },
  methods: {
    initEcharts() {
      this.echartsInit = this.$echarts.init(this.$refs.map_ref, "chalk");
      //获取地图的适量矢量数据
      this.$echarts.registerMap("china", china);
      // console.log(china);
      const option = {
        /*         series: [
          {
            type: "map",
            map: "china",
            geoindex: 0,
          },
        ], */
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            areaColor: "#2e72bf",
            borderColor: "#333",
          },
        },
        title: {
          text: "| 商家分布",
          left: 20,
          top: 20,
        },
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
      };
      this.echartsInit.setOption(option);
    },
    async getData() {
      //获取服务器数据
      const { data: res } = await this.$http.get("/map");
      this.allDate = res;
      // console.log(res);
      this.updateEchart();
      this.echartsInit.on("click", async (e) => {
        // console.log(e.name);
        // console.log(getProvinceMapInfo(e.name));
        const proviceInfo = getProvinceMapInfo(e.name);
        if (!this.mapData[proviceInfo.key]) {
          const { data: res } = await axios.get(
            "http://localhost:8081/" + proviceInfo.path
          );
          this.mapData[proviceInfo.key] = res;
          this.$echarts.registerMap(proviceInfo.key, res);
        }
        const changeOption = {
          geo: {
            type: "map",
            map: proviceInfo.key,
          },
        };
        this.echartsInit.setOption(changeOption);
      });
    },
    updateEchart() {
      const legendArr = [];
      this.allDate.forEach((item) => {
        legendArr.push(item.name);
      });
      // const colorArr=['red','green','pink']
      const seriesArr = [];
      this.allDate.forEach((item, index) => {
        seriesArr.push({
          type: "effectScatter",
          name: item.name,
          data: item.children,
          coordinateSystem: "geo",
          // color:colorArr[index],
          rippleEffect: {
            scale: 5,
          },
        });
      });
      // console.log(seriesArr);
      const dataOption = {
        series: seriesArr,
        legend: {
          data: legendArr,
        },
      };
      this.echartsInit.setOption(dataOption);
    },
    screenAdapt() {
      const titleFontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      // console.log(titleFontSize);
      const adapteOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
          legend: {
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2,
            },
          },
        },
      };
      this.echartsInit.setOption(adapteOption);
      this.echartsInit.resize();
    },
    reverMap() {
      this.$echarts.registerMap("china", china);
      const reverOption = {
        geo: {
          map: "china",
        },
      };
      this.echartsInit.setOption(reverOption);
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initEcharts();
    window.addEventListener("resize", this.screenAdapt);
    this.echartsInit.resize();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapt);
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;

  .com-echarts {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
}
</style>